<template>
  <div class="box">
    <!-- 顶部文字 -->
    <div class="top">
      <p class="title">实时游客统计</p>
      <img src="../../images/dataScreen-title.png" alt="" />
      <p class="right">
        可预约总量
        <span>99999</span>
        人
      </p>
    </div>
    <!-- 当前人数 -->
    <div class="number">
      <span v-for="(item, index) in people" :key="index">{{ item }}</span>
    </div>
    <!-- 盒子将来ECharts展示图形图表的节点 -->
    <div class="charts" ref="charts">123</div>
  </div>
</template>

<script setup lang="ts" name="Tourist">
import { onMounted, ref } from 'vue'
// 引入ECharts
import * as echarts from 'echarts'
// 引入水球图拓展插件
import 'echarts-liquidfill'

// 存储人数
let people = ref('66666人')
// 获取要展示图表的节点
let charts = ref()

// 组件挂载完毕
onMounted(() => {
  // 获取echarts类的实例
  let myCharts = echarts.init(charts.value)
  // 设置实例的配置项
  myCharts.setOption({
    // 系列：决定展示什么样的图形图表
    series: [
      {
        type: 'liquidFill', // 图形类型
        data: [0.6, 0.4, 0.2], // 展示的数据
        waveAnimation: true, // 动画
        animationDuration: 1000, // 动画持续时间
        animationDurationUpdate: 1000,
        radius: '90%', // 半径
        color: ['#294D99', '#156ACF', 'aqua'], // 颜色
        center: ['50%', '50%'], // 位置
        amplitude: '8%', // 振幅
        waveLength: '80%', // 波长
        direction: 'right', // 方向
        shape: 'circle', // 形状
        outline: {
          // 轮廓
          show: true,
          borderDistance: 8, // 轮廓距离
          itemStyle: {
            color: 'rgb(173,216,230)', // 轮廓颜色
            borderColor: '#294D99',
            borderWidth: 8,
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.25)',
          },
        },
        label: {
          // 文字样式
          show: true,
          formatter: '预测量',
          color: '#294D99',
          insideColor: '#fff',
          fontSize: 30,
          fontWeight: 'bold',
          align: 'center',
          baseline: 'bottom',
          position: 'inside',
        },
      },
    ],
  })
})
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  .box {
    background: url(../../images/dataScreen-main-lt.png) no-repeat;
    background-size: 100% 100%;
    margin-top: 15px;
    .top {
      margin-left: 20px;
      .title {
        color: white;
        font-size: 20px;
        margin-bottom: 5px;
      }
      .right {
        color: white;
        font-size: 20px;
        float: right;
        margin-top: -15px;
        margin-right: 15px;
        span {
          color: orange;
        }
      }
    }
    .number {
      margin-top: 30px;
      display: flex;
      padding: 0 10px;
      span {
        flex: 1;
        height: 60px;
        background: url(../../images/total.png) no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height: 60px;
        font-size: 30px;
        color: #29cfff;
      }
    }
    .charts {
      width: 100%;
      height: 220px;
    }
  }
}
</style>
